<template>
 

       <el-form label-position="top">
        <el-form-item label="项目类型">
          <mdp-select disabled  itemCode="projectType" v-model="project.xmType" width="100%"/>
          
        </el-form-item>
        <el-form-item label="项目阶段预览"> 
          <div style="width:800px;">   
                <el-steps v-if="projectPhasePlansDict && projectPhasePlansDict.length>0"
                    direction="vertical" space="60px"
                > 
                  <el-step style="cursor:pointer;" @click="onStepClick(item)" :title="item.phaseName" :status="item.phaseId==currPhase.phaseId?'success':'wait'" v-for="(item,index) in projectPhasePlansDict" :key="index">
                    <template #icon>
                      <icon :icon="item.icon"/>
                    </template>  
                    <template #description>
                      <div>
                        <el-row>
                          <el-col :span="12">
                            <icon icon="ep:timer"/>{{ $mdp.formatDate(item.startTime,'Y-M-D') }} ~ {{ $mdp.formatDate(item.endTime,'Y-M-D') }}  共 {{getDaysBetweenDates(item.startTime,item.endTime)}}天
                          </el-col>
                          
                          <el-col :span="12">
                            <icon icon="ep:user"/>{{ item.createUsername||item.createUserid }} 
                          </el-col>
                        </el-row>
                            
                      </div> 
                    </template>
                    </el-step>
        
                </el-steps>  
                  
        
          </div>
        </el-form-item>
        <el-form-item label="说明">
           <el-alert type="warning"> <icon icon="ep:bell"/>将把上面的各节点作为项目计划的一级计划进行提交，提交成功后，可按管理计划的规则进行维护</el-alert>
        </el-form-item>
       </el-form>
      <div class="footer"><el-button type="primary" @click="doInitProjectPhasePlan" :disabled="load.init">提交</el-button></div>
  <mdp-dialog ref="currPhaseCfgDialog">
    <template #default="{data}">
      <el-form label-width="120px">
        <el-form-item label="起止时间">
          <mdp-date-range v-model="data.currPhase" startKey="startTime" endKey="endTime"/>
        </el-form-item>
        
        <el-form-item label="负责人">
          <mdp-select-user v-model="data.currPhase.createUserid" @change2="(e)=>userSelect(data.currPhase,e)" :init-name="data.currPhase.createUsername"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer="{dialog}">
      <el-button @click="dialog.close()">关闭</el-button>
    </template>
  </mdp-dialog>
</template>

<script>
import util from '@/components/mdp-ui/js/util' //全局公共库

import {
  initProjectPhasePlan
} from '@/api/xm/core/xmTask'
 
 //新增界面 


import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'
 

export default {
  props: ['selProject'],
  
  emits:['init'],
  computed: {
    ...mapState(useUserStore, ['userInfo', 'roles']),
     
  },
  watch: { 
  },
  data() {
    return {
      load:{init:false}, 
      project:{}, 
      currPhase:{},
      projectPhasePlansDict:[],
    }
  }, //end data
  methods: {  
    doInitProjectPhasePlan(){
      this.load.init=true
      initProjectPhasePlan({projectId:this.project.id,tasks:this.projectPhasePlansDict}).then(res=>{
        var tips = res.tips
        this.load.init=false
        if(tips.isOk){
          this.$notify.success("初始化成功") 
          this.$emit('init')
        }else{
          this.$notify.error(tips.msg)
        }
      })
    },
    onStepClick(item){ 
      this.currPhase=item
      this.$refs['currPhaseCfgDialog'].open({currPhase:item,title:'设置'+item.phaseName})
    },
    getDaysBetweenDates(date1, date2) {
      const d1 = this.$mdp.initMoment(date1);
      const d2 = this.$mdp.initMoment(date2);
      const diffDays = d2.diff(d1, 'days'); // 使用moment.js的diff()方法获取两个日期之间的天数
      return diffDays;
    },
    userSelect(phase,user){
      if(user && user.userid){
        phase.createUserid=user.userid
        phase.createUsername=user.username
      }else{ 
        phase.createUserid=''
        phase.createUsername=''
      }
    }
  }, //end methods
  components: {
  },
  mounted() {
    this.project=this.selProject
    this.$mdp.getDictOptions('projectPhasePlans'+this.project.xmType).then(res=>{ 
      this.projectPhasePlansDict=res.map(k=>{
        return {
          id:k.id,
          name:k.name,
          phaseId:k.id,
          phaseName:k.name,
          projectId:this.project.id,
          projectName:this.project.name,
          startTime:null,
          endTime:null,
          createUserid:this.userInfo.userid,
          createUsername:this.userInfo.username,
          ntype:'1',
          sortLevel:k.id,
          lvl:1,
          icon:k.icon,
          color:k.color,
          parentTaskid:'0'
        }
      })
    })
  }
}
</script>

<style lang="scss" />
